<template>
    <div>
      <el-table
        ref="multipleTable"
        :data="interfaceRoleList"
        style="width: 100%"
        row-key="id"
        lazy
      >
        <el-table-column prop="name" label="接口名" />
        <el-table-column prop="url" label="接口路径" />
        <el-table-column label="权限是否开启">
          <template slot-scope="scope">
            <el-switch
              :active-value="scope.row.roleId === null"
              :inactive-value="scope.row.roleId !== null"
              @change="change(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
  
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="total"
        @prev-click="currentChange"
        @next-click="currentChange"
        @current-change="currentChange"
      />
    </div>
  </template>
  
  <script>
  import { Message } from 'element-ui'
  
  export default {
    name: 'MenuDialog',
    props: {
      roleId: Number
    },
    data() {
      return {
        query: '',
  
        interfaceRoleList: [],
  
        total: 0,
        page: 0,
        pageSize: 5
      }
    },
    mounted() {
      this.doSelectAll()
    },
    methods: {
      currentChange(index) {
        this.page = index - 1
        this.doSelectAll()
      },
  
      doSelectAll() {
        this.$store
          .dispatch('roleInterface/selectAll', {
            roleId: this.roleId,
            name: this.query,
            page: this.page,
            pageSize: this.pageSize
          })
          .then((res) => {
            this.interfaceRoleList = res.list
            this.total = res.total
          })
      },
  
      change(obj) {
        if (obj.roleId === null) {
          this.add(obj)
          obj.roleId = this.roleId
        } else {
          this.del(obj.roleInterfaceId)
          obj.roleId = null
        }
      },
  
      add(interfaceRole) {
        this.$store
          .dispatch('roleInterface/add', {
            roleId: this.roleId,
            interfaceId: interfaceRole.interfaceId
          })
          .then((res) => {
            Message({
              type: 'success',
              message: '开启成功',
              duration: 5 * 1000
            })
            interfaceRole.interfaceRoleId = res.data
          })
      },
  
      del(roleInterfaceId) {
        this.$store
          .dispatch('roleInterface/del', {
            roleInterfaceId: roleInterfaceId
          })
          .then((res) => {
            Message({
              type: 'success',
              message: '关闭成功',
              duration: 5 * 1000
            })
          })
      }
    }
  }
  </script>
  
  <style scoped>
  </style>
  